<script setup>
import { onBeforeMount, reactive, ref, toRefs, computed } from 'vue';
import { getNodeListHandler as getListHandler, getClusterListHandler  } from '../../api/cluster.js';
import { ElMessage,ElMessageBox } from 'element-plus';
import { Close,Check } from '@element-plus/icons-vue'
import {useRoute} from 'vue-router'
import Edit from './Edit.vue';
const route = useRoute()
const data = reactive({
    items: [],
    clusterList: [],
    clusterId: "",
    editItem: {},
    editNodeName: ""
})

const loading = ref(true)

const editDialog = ref(false)
const value1 = ref(false)

// 获取列表
const getList= (clusterId) =>{
    loading.value=true
    getListHandler(clusterId).then((response)=>{
        console.log("response:", response.data.data.items)
        data.items=response.data.data.items
        loading.value=false
    })
}

// 编辑
const edit = (row) => {
    loading.value = true
    data.editItem = row
    data.editNodeName = row.metadata.name
    editDialog.value = true
    loading.value = false
}


const filterTableData = computed(() =>
  data.items.filter(
    (item) =>
      !search.value ||
      item.metadata.name.toLowerCase().includes(search.value.toLowerCase()) || 
      item.status.addresses[0].address.toLowerCase().includes(search.value.toLowerCase()) 
  )
)

// 异步转成同步
const getClusterList = async() => {
    await getClusterListHandler().then(
        (res) => {
            data.clusterList = res.data.data.items
        }
    )
}
onBeforeMount(async()=>{
    // 查询列表之前，要知道哪个集群的节点列表
    // 1、查询到集群列表
    // 2、如果没有指定集群，则给一个默认值，进行获取集群列表
    // 3、如果指定了集群，就直接查询当前集群的节点列表
    // 4、切换了集群之后，应该重新获取集群列表
    // 5、集群不可用，则不可选
    await getClusterList()
    const defaultClusterSelected = data.clusterList[0].id
    // 获取当前请求是否携带了集群ID的参数
    const curClusterId = route.query.clusterId
    data.clusterId = curClusterId?curClusterId:defaultClusterSelected

    getList(data.clusterId)
    console.log("123:",data)
})

const closeDialog = () => {
    getList(data.clusterId)
}
const rollback = ()=>{
    editDialog.value = false
    getList()
}

const search = ref('')
const { clusterId, clusterList, editItem, editNodeName } = toRefs(data)

</script>

<template>
    <el-card v-loading="loading" element-loading-text="努力加载中......" class="box-card">
        <template #header>
            <div class="card-header">
            <div>
                <span>节点列表</span>
            </div>
            <div class="card-header">
                <el-select v-model="clusterId" placeholder="选择集群" @change="getList(clusterId)">
                    <el-option v-for="item in clusterList"
                    :key="item.id"
                    :label="item.id"
                    :value="item.id"
                    :disabled="item.status == 'InActive'"
                    />
                </el-select>
                <el-input v-model="search" size="small" placeholder="搜索" style="width: 200px;margin-left:20px;height:32px;"  />
            </div>
            </div>
        </template>
        <el-table 
            border 
            height="480" 
            :data="filterTableData" 
            style="width: 100%">
            <el-table-column  fixed prop="" align="center" label="主机名">
                <template #default="scope">
                    <el-button link type="primary" @click="deleteItem(scope.row)">{{ scope.row.metadata.name }}</el-button>
                </template>
            </el-table-column>
            <el-table-column  prop="status.addresses[0].address" align="center" label="IP" width="180" />
            <el-table-column  prop="metadata.name" align="center" label="角色" width="100" sortable/>
            <el-table-column prop="" align="center" label="状态" width="80" sortable>
                <template #default="scope">
                    <el-icon v-if="scope.row.status == 'Active'" color="green"><Check /></el-icon>
                    <el-icon v-else color="red"><Close /></el-icon>
                </template>
            </el-table-column>
            <el-table-column label="禁止调度" align="center">
                <template #default="scope">
                    <el-switch v-model="value1"/>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="驱逐" align="center">
                <template #default="scope">
                    <el-switch v-model="value1"/>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="180">
                <template #default="scope">
                    <el-button  link type="primary"  @click="edit(scope.row)">编辑</el-button>
                    <el-button  link type="warning" size="small" @click="deleteItem(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <el-dialog 
    destroy-on-close 
    @close="closeDialog" 
    v-model="editDialog" 
    :title="'正在编辑集群:' + clusterId +'  节点:' + editNodeName"
    width="50%">
        <Edit @rollback="getList" :cluster-id="data.clusterId" :item-form="editItem"></Edit>
    </el-dialog>
</template>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.text {
    font-size: 14px;
}
.item {
    margin-bottom: 18px;
}
</style>